<template>
  <div class="single">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formModel"
          :rules="rules"
          ref="formModel"
          label-width="110px"
          class="demo-formModel"
        >

          <!-- 是否有录课经验 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否有录课经验" prop="lkjy">
                <el-select
                  v-model="formModel.lkjy"
                  placeholder="请选择是否有录课经验"
                  class="el_select"
                >
                  <el-option
                    v-for="item in sellist"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="录课常用平台" prop="lkpt">
                <el-input v-model="formModel.lkpt" placeholder="请输入录课常用平台" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是否有直播经验 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否有直播经验" prop="zbjy">
                <el-select
                  v-model="formModel.zbjy"
                  placeholder="请选择是否有直播经验"
                  class="el_select"
                >
                  <el-option
                    v-for="item in sellist"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="直播常用平台" prop="zbpt">
                <el-input v-model="formModel.zbpt" placeholder="请输入直播常用平台" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是否有短视频课程或其他课程片段 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否有短视频课程" prop="kcpd">
                <el-select
                  v-model="formModel.kcpd"
                  placeholder="请选择是否有短视频课程或其他课程片段"
                  class="el_select"
                >
                  <el-option
                    v-for="item in sellist"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品链接" prop="lj">
                <el-input v-model="formModel.lj" placeholder="请输入商品链接" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是否有录课经验 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否有自媒体或微信群" prop="zmt">
                <el-select
                  v-model="formModel.zmt"
                  placeholder="请选择是否有自媒体或微信群"
                  class="el_select"
                >
                  <el-option
                    v-for="item in sellist"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="粉丝数量" prop="fssl">
                <el-input v-model="formModel.fssl" placeholder="请输入粉丝数量" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="btns">
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm('formModel')"
                >{{ btnname }}
                </el-button
                >
                <el-button @click="resetForm('formModel')">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'onlineinfo',
  data () {
    return {

      sellist: [
        {name: '否', val: 0},
        {name: '是', val: 1},
      ],
      formModel: {
        lkjy: '',
        lkpt: '',
        zbjy: '',
        zbpt: '',
        kcpd: '',
        lj: '',
        zmt: '',
        fssl: '',
      },
      rules: {
        lkpt: [
          {required: true, message: '请输入录课常用平台', trigger: 'blur'},
        ],
        zbpt: [
          {required: true, message: '请输入直播常用平台', trigger: 'blur'},
        ],
        lj: [
          {required: true, message: '请输入商品链接', trigger: 'blur'},
        ],
        fssl: [
          {required: true, message: '请输入粉丝数量', trigger: 'blur'},
        ],
        lkjy: [
          {required: true, message: '请选择是否有录课经验', trigger: 'change'},
        ],
        zbjy: [
          {required: true, message: '请选择是否有直播经验', trigger: 'change'},
        ],
        kcpd: [
          {required: true, message: '请选择是否有短视频课程或其他课程片段', trigger: 'change'},
        ],
        zmt: [
          {required: true, message: '请选择否有自媒体或微信群', trigger: 'change'},
        ],
      },
      btnname: '添加',
      page: {
        id: '',
        op: 'add'
      },
    }
  },
  mounted () {
    this.initdata()
  },
  methods:
    {
      initdata () {
        var params = this.$route.params
        console.log(params)
        this.page.id = params.id
        this.page.op = params.op
        this.get_detail()
      },
      get_detail () {
        var params = {jsId: this.page.id}
        this.$http({
          url: this.$http.adornUrl('/xsjxxx/getJsXsjxxx'),
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(({data}) => {
          console.log(data.data)
          if (data && data.code === 0) {
            if (data.data) {
              this.page.op = 'detail'
              this.btnname = '修改'
              this.formModel = data.data
            } else {
              this.page.op = 'add'
              this.btnname = '添加'
            }
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      submitForm (formName) {
        this.formModel.jsId = this.$store.state.user.jsid
        let formData = this.get_formdata(this.formModel)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.page.op == 'add') {

              this.$http({
                url: this.$http.adornUrl('/xsjxxx/save'),
                data: formData,
                method: 'post'
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.$nextTick(() => {
                        this.$refs[formName].resetFields()
                      })
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
            } else {
              formData.append("id",this.formModel.id);
              this.$http({
                url: this.$http.adornUrl('/xsjxxx/update'),
                method: 'post',
                data: formData
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
      ,
      get_formdata (config) {
        console.log(config)
        //对象转formdata格式
        const formData = new FormData()
        //循环传入的值转换formData
        Object.keys(config).forEach((key) => {
          formData.append(key, config[key])
        })
        return formData
      }
      ,
    }
  ,
}
</script>


<style>
.single {
  padding: 0.5rem;
}

.el_select {
  width: 15rem;
}

.btns {
  padding-left: 22rem;
}

</style>

